<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="common/includeAdmin::header('菜单管理','')"></head>
<body class="childrenBody">
	<form class="layui-form">
		<blockquote class="layui-elem-quote quoteBox">
			<form class="layui-form">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" class="layui-input searchVal"
							placeholder="请输入搜索的内容" />
					</div>
					<a class="layui-btn search_btn" data-type="reload">搜索</a>
				</div>
				<div class="layui-inline">
					<a class="layui-btn layui-btn-normal add">新增</a>
				</div>
				<div class="layui-inline">
					<a class="layui-btn layui-btn-danger layui-btn-normal batchDel">批量删除</a>
				</div>
			</form>
		</blockquote>
		<table id="menuList" lay-filter="menuList"></table>

		<!--操作-->
		<script type="text/html" id="menuBar">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	</script>
	</form>
	<div th:include="common/includeAdmin::footer"></div>
	<script type="text/javascript">
	layui.use([ 'form', 'layer', 'table' ], function() {
		var form = layui.form;
		var $ = layui.jquery;
		var layer = parent.layer === undefined ? layui.layer : top.layer;
		var table = layui.table;

		var tableIns = table.render({
			elem : '#menuList',
			// url : '/json/syslink.json',
			url : "/sys/menu/",
			page : true,
			loading : true,
			height : 'full-110',
			limit : 10,
			limits : [ 10, 15, 20, 25 ],
			response:{
	        	countName: 'total'
	        },
			id : "menuListTable",
			cols : [ [ {
				type : 'checkbox'
			}, {
				field : 'id',
				width : 100,
				title : 'ID'
			}, {
				field : 'menuName',
				width : 150,
				title : '菜单名称',
				sort : true
			}, {
				field : 'menuCode',
				width : 150,
				title : '链接地址'
			}, {
				field : 'menuIco',
				width : 160,
				title : '图标',
				templet:function(d){
					return "<i class='seraph "+d.menuIco+"'><i>";
				}
			}, {
				field : 'menuDesc',
				title : '菜单描述',
				width : 160
			} // minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
			, {
				field : 'menuType',
				title : '菜单类型',
				width : 180,
				templet : "#menuTypeFormttter"
			} , {
				field : 'sort',
				title : '排序',
				width : 80,
				sort : true
			} , {
				field : 'state',
				title : '状态',
				width : 100,
				templet:"#stateFormatter"
			} , {
				field : 'createDate',
				title : '创建时间',
				width : 120,
				sort : true,
				templet : function(d) {
					return d.createDate.substring(0, 10);
				}
			}, {
				field : 'updateDate',
				title : '更新时间',
				minWidth : 130,
				sort : true,
				templet : function(d) {
					return d.updateDate.substring(0, 10);
				}
			}, {
				title : '操作',
				width : 170,
				templet : '#menuBar',
				fixed : "right",
				align : "center"
			} ] ]
		});
		// 列表操作
		table.on('tool(menuList)', function(obj) {
			var layEvent = obj.event, data = obj.data;
			var state = 0;
			if (layEvent === 'edit') { // 编辑
				add(data);
			}  else if (layEvent === 'del') { // 删除
				layer.confirm('确定删除此用户？', {
					icon : 3,
					title : '提示信息'
				}, function(index) {
					remove(data.id);
					tableIns.reload();
					layer.close(index);
					// })
				});
			}
		});
		 //添加文章
	    function add(edit){
	    	var title="添加菜单";
	    	var url="/sys/menu/save";
	    	if(!B.isEmpty(edit)){
	    		url+="?menuId="+edit.id;
	    		title="编辑文章";
	    	}
	        var index = layui.layer.open({
	            title : title,
	            type : 2,
	            content : url,
	            success : function(layero, index){
	                var body = layui.layer.getChildFrame('body', index);
	            	if(edit){
	            		body.find('#menuId').val(edit.id);
	            	}
	               /* if(edit){
	                	debugger;
	                	console.info("edit.content.content"+edit.content.content);
	                	console.info("edit.catalog.catalogId"+edit.catalog.catalogId);
	                	//layer.msg("edit");
	                    body.find("#title").val(edit.title);
	                    body.find("#blogDesc").val(edit.blogDesc);
	                    body.find(".thumbImg").attr("src",edit.blogImg);
	                    body.find("#content").val(edit.content.content);
	                    body.find("#catalog").val(edit.catalog.catalogId);
	                    //body.find(".openness input[name='openness'][title='"+edit.newsLook+"']").prop("checked","checked");
	                    body.find("#blogTop").prop("checked",edit.blogTop=="1"?"checked":"");
	                    body.find("#blogHot").prop("checked",edit.blogHot=="1"?"checked":"");
	                    //body.find("#blogTag").prop("checked",edit.blogTop);
	                    formSelects.value('blogTagSelect', [2, 4]); 
	                    form.render();
	                }*/
	                setTimeout(function(){
	                    layui.layer.tips('点击此处返回菜单列表', '.layui-layer-setwin .layui-layer-close', {
	                        tips: 3
	                    });
	                },500)
	            }
	        })
	        layui.layer.full(index);
	        //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
	        $(window).on("resize",function(){
	            layui.layer.full(index);
	        })
	    }
		function remove(id){
			B.del({
				url:"/sys/menu/"+id,
				loading:true,
				success:function(data){
						B.msg(data.msg);
						tableIns.reload();
				}
			});
		}
		$(".add").click(function(){
			add();
		});
		$(".search_btn").click(function() {
			if($(".searchVal").val() != ''){
	            table.reload("menuListTable",{
	                page: {
	                    curr: 1 //重新从第 1 页开始
	                },
	                where: {
	                    linkName: $(".searchVal").val()  //搜索的关键字
	                }
	            })
	        }else{
	            layer.msg("请输入搜索的内容");
	        }
		});
		$('.batchDel').click(function(){
			var checkStatus = table.checkStatus('menuListTable'),
	        data = checkStatus.data,
	        ids = [];
		    if(data.length > 0) {
		        for (var i in data) {
		            ids.push(data[i].id);
		        }
		        layer.confirm('确定删除选中的数据？', {icon: 3, title: '提示信息'}, function (index) {
		            remove(ids);
		            tableIns.reload();
		            layer.close(index);
		            // })
		        })
		    }else{
		        layer.msg("请选择需要删除数据");
		    }
		});
	})
	
	</script>
	<!--类型状态-->
	<script type="text/html" id="menuTypeFormttter">
		{{#  if(d.menuType == "1"){ }}
		<span class="layui-red">前台导航</span>
		{{#  } else if(d.menuType == "2"){ }}
		<span class="layui-red">前台普通页面</span>
		{{#  } else { }}
		<span class="layui-red">后台菜单</span>
		{{#  }}}
	</script>
	<!--状态-->
	<script type="text/html" id="stateFormatter">
		{{#  if(d.state == "1"){ }}
		<span class="layui-blue">正常</span>
		{{#  } else { }}
		<span class="layui-red">禁用</span>
		{{#  }}}
	</script>
</body>
</html>

